<template>
  <div>
    <basic-container>
      <avue-tabs :option="option" v-model="form" @change="handleChange"></avue-tabs>
      <div v-if="type.prop === 'userInfo'">
        <avue-form @tab-click="handleTabClick" :option="userInfoOption" v-model="form" @submit="handleSubmit" :upload-after="uploadAfter"  >
        </avue-form>
      </div>
      <div v-if="type.prop === 'password'">
        <avue-form @tab-click="handleTabClick" :option="pwdOption" v-model="form" @submit="handleSubmit">
        </avue-form>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { exportSysUserInfoExcel, saveOrUpdateSysUserInfo, saveOrUpdateSysUserInfoList, saveSysUserInfo, saveSysUserInfoList, deleteSysUserInfo, querySysUserInfo, querySysUserInfoListPage, updateSysUserInfo, deleteSysUserInfoList } from '@/api/system/sysUserInfoApi';
import { mapGetters } from 'vuex';
import { reqCommonMsg } from '@/util/reqCommonMsg';

export default {
  data() {
    return {
      type: { prop: 'userInfo' },
      option: {
        column: [{
          label: '个人信息',
          prop: 'userInfo'
        }, {
          label: '修改密码',
          prop: 'password'
        }]
      },
      // 密码
      pwdOption: {
        submitText: '修改',
        column: [{
          label: '原密码',
          span: 12,
          row: true,
          type: 'password',
          prop: 'oldPassword'
        }, {
          label: '新密码',
          span: 12,
          row: true,
          type: 'password',
          prop: 'newPassword',
          tip: '新密码必须6位及以上，且含大、小写字母、数字、特殊字符 其中三种!'
        }, {
          label: '确认密码',
          span: 12,
          row: true,
          type: 'password',
          prop: 'newPassword1',
          tip: '新密码必须6位及以上，且含大、小写字母、数字、特殊字符 其中三种!'
        }]
      },
      //用户信息
      userInfoOption: {
        submitText: '修改',
        column: [
        {
            label: '头像',
            prop: 'headImgUrl',
            type: 'upload',
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 24,
            sortable: false,
            hide: true,
            value: 'blue',
            overHidden: true,
            listType: 'picture-img',
            rules: [{
              required: false,
              message: '请输入内容',
              trigger: 'blur'
            }],
            propsHttp: {
              name: 'fileName',
              url: 'filePath'
            },
            tip: '文件大小不超过10M',
            action: '/file/upload',
          }, 
        {
          label: '姓名',
          span: 12,
          row: true,
          prop: 'realName',
          disabled: true,
        }, {
          label: '用户名',
          span: 12,
          row: true,
          prop: 'userName',
          disabled: true,
        }, {
          label: '所属部门',
          span: 12,
          row: true,
          prop: 'belongOrgName',
          disabled: true,
        }, {
          label: '手机号',
          span: 12,
          row: true,
          prop: 'mobileNo',
          maxlength: 11
        }, {
          label: '邮箱',
          prop: 'email',
          span: 12,
          row: true,
        }, {
          label: '状态',
          prop: 'validFlag',
          type: 'switch',
          span: 12,
          row: true,
          disabled: true,
          dicData: [
            {
              label: '无效',
              value: '0'
            },
            {
              label: '有效',
              value: '1'
            }
          ]
        }]
      },
      form: {}
    };
  },
  computed: {
    ...mapGetters(['website', 'userInfo', 'orgTree', 'permission']),
  },
  created() {
    this.querySysUserInfo();
  },
  methods: {
    handleChange(column) {
      this.type = column
      //this.$message.success(JSON.stringify(column))
    },
    /**
     * 图片上传成功后执行
     */
    // uploadAfter(res, done, loading, column) {
    //   this.form.headImgUrl = res.filePath;
    //   done()
    // },
    uploadAfter(res, done, loading, column) {
      done()
      if (res.head.respCode == 'S0000') {
        this.$message({
          type: 'success',
          message: '上传成功！'
        });
      }
      else {
        this.$message({
          type: 'error',
          message: '上传失败！'
        });
      }
    },
    /**
     * 查询用户信息
     */
    querySysUserInfo() {
      this.reqParams = {
        singleBody: {
          id: this.userInfo.userId
        }
      }
      let commonData = reqCommonMsg(this.reqParams)
      querySysUserInfo(commonData).then(res => {
        this.form = res.data.body.singleBody;
      }, error => {
        this.loading = false;
      });
    },
    /**
     * 修改一条记录
     */
    handleSubmit(form, done) {
      //修改密码
      if (this.form.oldPassword) {
        let tmpPwd = this.$toolUtil.encodeMd5(this.form.oldPassword);
        if (tmpPwd != this.form.password) {
          this.$message({
            customClass: 'zZindex',
            type: 'error',
            message: '旧密码输入错误!'
          });
          return false;
        }
        else if (!this.form.newPassword) {
          this.$message({
            customClass: 'zZindex',
            type: 'error',
            message: '请输入新密码!'
          });
          return false;
        }
        else if (this.form.oldPassword == this.form.newPassword) {
          this.$message({
            customClass: 'zZindex',
            type: 'error',
            message: '新旧密码一样, 还改什么呢？'
          });
          return false;
        }
        else if (!this.$validate.checkPwdStrong(this.form.newPassword)) {
          this.$message({
            customClass: 'zZindex',
            type: 'error',
            message: '新密码必须6位及以上，且含大、小写字母、数字、特殊字符 其中三种!'
          });
          return false;
        }
        else if (this.form.newPassword != this.form.newPassword1) {
          this.$message({
            customClass: 'zZindex',
            type: 'error',
            message: '两次输入新密码不一致!'
          });
          return false;
        }
        else {
          this.form.password = this.$toolUtil.encodeMd5(this.form.newPassword);
        }
      }
      this.reqParams.singleBody = this.form;
      this.commonData = reqCommonMsg(this.reqParams)
      updateSysUserInfo(this.commonData).then(() => {
        this.$message({
          customClass: 'zZindex',
          type: 'success',
          message: '保存成功!'
        });
        this.form.oldPassword = '';
        this.form.newPassword = '';
        this.form.newPassword1 = '';
        this.querySysUserInfo();
        //修改 store里的userInfo
        this.userInfo.avatar = form.headImgUrl;
        this.$store.dispatch('setUserInfo', this.userInfo);
        //刷新token；
        //this.$store.dispatch('RefreshToken', '');
        done();
      }, error => {
        done()
        //this.$console.log(error); 
      });
    },
  }
};
</script>

<style></style>
